<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/media-100.css"/>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/KanBan.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background: #13152a;
				font-size: 14px;
			}
			.title{
				text-align: center;
				font-size: 0.36rem;
				color: #566bfe;
				margin-top: 0.25rem;
			}
			.banner{
				width:  100%;
				position: relative;
				margin-bottom: 0.4rem;
			}
			.banner .lba{
				width:  65%;
				margin: 0.3rem auto;
			}
			.banner .lba li{
				width:  65%;
				background: #1a1e37;
				position: absolute;
			}
			.banner .lba li p{
				text-align: center;
				font-size: 0.24rem;
				color: #FFFFFF;
				line-height: 1.5;
				vertical-align: middle;
				margin-top: 13%;
			}
			.banner .lba li .num{
				margin-top: 0;
				font-size: 0.34rem;
			}
			.btn{
			  position: absolute;
			  color: #fff;
			  top: 45%;
			  width: 0.29rem;
			  height: 0.5rem;
			  background:url(img/left.png);
			  background-size:100% ;
			  cursor: pointer;
			}
			.btn1{
				left: 0.2rem;
			}
			.btn2{
			  position: absolute;
			  right: 0.2rem;
			  background: url(img/right.png);
			  background-size:100% ;
			}
		</style>
	</head>

	<body>
		<h1 class="title">资金看板</h1>
		<div class="banner">
			<ul class="lba">
				<li>
					<p>剩余金额</p>
					<p class="num" style="color: #36d7ff;">214,,793,00</p>
				</li>
				<li>
					<p>已贷出金额</p>
					<p class="num" style="color: #e43b3b;">214,,793,00</p>
				</li>
				<li>
					<p>账户总金额</p>
					<p class="num" style="color: #f9bf0f;">214,,793,00</p>
				</li>
			</ul>
			<div class="btn btn1"></div>
      		<div class="btn btn2"></div>
			<!--<ul class="lbb">
				<li class="on"></li>
				<li></li>
				<li></li>
			</ul>-->
		</div>
		<div id="chart" style="width: 100%;height: 6.5rem"></div>
		<div id="chart2" style="width: 100%;height: 4rem;margin-top: 0.4rem;"></div>
		<div id="chart3" style="width: 100%;height: 5rem;margin-top: 0.4rem;"></div>
		<div id="chart4" style="width: 100%;height: 5rem;margin-top: 0.4rem;"></div>
	</body>
	<script type="text/javascript">
		$(window).resize(function () {          //当浏览器大小变化时
			window.location.reload();
		});
		var chart = echarts.init(document.getElementById("chart"));
		
//		var myChartContainer = function () {
//		    chart.style.width = window.innerWidth+'px';
//		    chart.style.height = window.innerHeight+'px';
//		};
		var option = {
			title: {
				text: '资金流入流出分析',
				x: 'center',
				left: 'center',
				top:'5%',
				textStyle: {
					color: "#566bfe",
					fontWeight: 'normal',
				}
			},
			legend: {
				orient: 'horizontal',
				x: 'center',
				bottom:0,
				data: ['收款', '放款', '净流入'],
				textStyle:{
					color:'#fff'
				}
			},
			color: ['#e43b3b','#29347b','#fcd729'],
			tooltip: {
				trigger: 'axis',
			},
			grid: {
				left: '3%',
				right: '10%',
				bottom: '10%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: ['201701103', '201701104', '201701105','201701106'],
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				type: 'value'
			}],
			textStyle: {
				color: "#fff"
			},
			series: [{
				name: '收款',
				type: 'bar',
				barWidth:'25%',
				data: [800, 900, 1100,600]
			},{
				name: '放款',
				type: 'bar',
				barWidth:'25%',
				data: [1000, 1000, 800,600]
			},{
				name: '净流入',
				type: 'line',
				stack: '总量',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				areaStyle: {
					normal: {}
				},
				data: [-600,-500,-300,-200]
			}]
		};
		chart.setOption(option, true);
		 window.onresize = function () {
		    myChartContainer();
		    chart.resize();
		};
		
		
		var chart2 = echarts.init(document.getElementById('chart2'));
		var option = {
			title: {
				text: '可用资金余额分析',
				subtext: '一润供应链',
				x: 'center',
				textStyle: {
					color: "#566bfe",
					fontWeight: 'normal',
				}
			},
			tooltip: {
				trigger: 'item',
//				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				orient: 'horizontal',
				x: 'center',
				bottom:0,
				data: [{name: '一润供应链管理(上海)有限公司',
					    // 强制设置图形为圆。
					    icon: 'circle',
					    // 设置文本为红色
					    textStyle: {
				        color: 'red'
				       }
			    },{name: '中航信托股份有限公司',
					    // 强制设置图形为圆。
					    icon: 'circle',
					    // 设置文本为红色
					    textStyle: {
				        color: 'green'
				       }
			    }]
			},
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: ['40%', '60%'],
				avoidLabelOverlap: false,
				center: ['50%', '60%'],
				data: [ {value:'100',name:'一润供应链管理(上海)有限公司'},
						    {value:'300',name:'中航信托股份有限公司'}],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};

		chart2.setOption(option);
		
		
		var chart3 = echarts.init(document.getElementById("chart3"));

		var option = {
			color: ['#3398DB'],
			title: {
				text: '资金流入月度趋势分析',x: 'center',
				textStyle: {
					color: "#566bfe",
					fontWeight: 'normal',
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				show:false,
				x: 'center',
				bottom:0,
				data: ['资金流入']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: [2016-1,2016-2,2017-3,2017-4],
				axisLabel:{
					color:'#fff',
				}
			}],
			yAxis: [{
				type: 'value',
				axisLabel:{
					color:'#fff',
				}
			}],
			series: [{
				name: '资金流入',
				type: 'line',
				stack: '总量',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				areaStyle: {
					normal: {}
				},
				data: [100,200,300,500,400]
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		chart3.setOption(option,true);
		
		
		var chart4 = echarts.init(document.getElementById("chart4"));

		var option = {
			color: ['#D4726f'],
			title: {
				text: '资金流入月度趋势分析',x: 'center',
				textStyle: {
					color: "#566bfe",
					fontWeight: 'normal',
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				show:false,
				x: 'center',
				bottom:0,
				data: ['资金流入']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: [2016-1,2016-2,2017-3,2017-4],
				axisLabel:{
					color:'#fff',
				}
			}],
			yAxis: [{
				type: 'value',
				axisLabel:{
					color:'#fff',
				}
			}],
			series: [{
				name: '资金流入',
				type: 'line',
				stack: '总量',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				areaStyle: {
					normal: {}
				},
				data: [100,200,300,500,400]
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		chart4.setOption(option,true);
	</script>

</html>